<template>
  <v-card
    flat
    class="pa-3 mt-2"
    v-loading="is_loading"
  >
    <v-card-text class="d-flex">
      <v-avatar
        rounded
        size="120"
        class="me-6"
      >
        <v-img :src="account.avatarImg"></v-img>
      </v-avatar>

      <!-- upload photo -->
      <div>
        <v-btn
          color="primary"
          class="me-3 mt-5"
          @click="$refs.refInputEl.click()"
        >
          <v-icon class="d-sm-none">
            {{ icons.mdiCloudUploadOutline }}
          </v-icon>
          <span class="d-none d-sm-block">上传头像</span>
        </v-btn>

        <input
          ref="refInputEl"
          @change="upload_avatar"
          type="file"
          accept=".jpeg,.png,.jpg,GIF"
          :hidden="true"
        />

        <!-- reset button is somewhat useless
        <v-btn
          color="error"
          outlined
          class="mt-5"
        >
          Reset
        </v-btn>
        -->
        <p class="text-sm mt-5">
          图片格式为 JPG, GIF or PNG, 最大 800KB
        </p>
      </div>
    </v-card-text>

    <v-card-text>
      <v-form class="multi-col-validation mt-6">
        <v-row>
          <v-col
            md="6"
            cols="12"
          >
            <v-text-field
              v-model="account.username"
              label="用户名"
              dense
              outlined
            ></v-text-field>
          </v-col>

          <v-col
            cols="12"
            md="6"
          >
            <v-text-field
              v-model="account.email"
              label="E-mail"
              dense
              outlined
            ></v-text-field>
          </v-col>

<!--          <v-col cols="12">-->
<!--            <v-textarea-->
<!--              v-model="account.bio"-->
<!--              outlined-->
<!--              rows="3"-->
<!--              label="个人简介"-->
<!--            ></v-textarea>-->
<!--          </v-col>-->

          <!-- alert -->
          <v-col cols="12">
            <v-alert
              color="warning"
              text
              class="mb-0"
              v-show="account.unverified_email"
            >
              <div class="d-flex align-start">
                <v-icon color="warning">
                  {{ icons.mdiAlertOutline }}
                </v-icon>

                <div class="ms-3">
                  <p class="text-base font-weight-medium mb-1">
                    Your email is not confirmed. Please check your inbox.
                  </p>
                  <a
                    href="javascript:void(0)"
                    class="text-decoration-none warning--text"
                  >
                    <span class="text-sm">Resend Confirmation</span>
                  </a>
                </div>
              </div>
            </v-alert>
          </v-col>

          <v-col cols="12">
            <v-btn
              color="primary"
              class="me-3"
              @click="change_settings"
            >
            保存更改
            </v-btn>
          </v-col>
        </v-row>
      </v-form>
    </v-card-text>
  </v-card>
</template>

<script>
import { mdiAlertOutline, mdiCloudUploadOutline } from '@mdi/js'

export default {
  setup() {
    const status = ['Active', 'Inactive', 'Pending', 'Closed']

    return {
      status,
      icons: {
        mdiAlertOutline,
        mdiCloudUploadOutline,
      },
    }
  },
  data() {
    return {
      account: {
        avatarImg: "",
        username: '',
        name: '',
        email: '',
        bio: '',
      },
      id: '',
      is_loading: false
    }
  },
  mounted() {
    this.is_loading = true
    this.$api.account.get()
      .then(data => {
        this.account = data.account
        this.id = data.account.username
        console.log(data)
      })
      .catch(error => this.$notify({
        message: error.api_detail || error,
        title: "API error"
      }))
      .finally(() => this.is_loading = false)
  },
  methods: {
    upload_avatar() {
      this.is_loading = true
      let files = this.$refs.refInputEl.files
      console.log(files)
      if (!files.length) {
        return
      }
      let avatar = files[0]
      this.$api.account.upload_avatar(this.id, avatar)
        .then(data => console.log(data))
        .then(() => {
          this.$message("修改成功")
          this.$router.go()
        })
        .catch(error => this.$notify({
          message: error.api_detail || error,
          title: "API error"
        }))
        .finally(() => this.is_loading = false)
    },
    change_settings() {
      this.is_loading = true
      this.$api.account.change_settings(this.id, this.account.bio, this.account.email)
        .then(() => {
          this.$message("修改成功")
          this.$router.go()
        })
        .catch(error => this.$notify({
          message: error.api_detail || error,
          title: "API error"
        }))
        .finally(() => this.is_loading = false)
    }
  }
}
</script>
